import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Radar } from '@ant-design/plots';
import { connect } from 'umi';
const CompareRadarChart = (props: any) => {
  const [data, setData] = useState([]);

  const getAllList = () => {
    if (props.dispatch) {
      props.dispatch({
        //路径：model的namespace+effects函数名
        type: 'Model_StudentAnalysisStudentModel/getStudentClassTwoAnalysisEffect',
        payload: {
          value: JSON.parse(props.user.currrentuser).account,
          callback: (value: any) => {
            console.log(value);
            let dataTmpt = [
              {
                item: '德育分数',
                user: value[0].user,
                score: value[0].score,
              },
              {
                item: '劳动分数',
                user: value[0].user,
                score: value[1].score + value[3].score,
              },
              {
                item: '美育分数',
                user: value[0].user,
                score: value[2].score,
              },
              {
                item: '智育分数',
                user: value[0].user,
                score: value[4].score,
              },
              {
                item: '体育分数',
                user: value[0].user,
                score: value[5].score,
              },
            ];
            setData(dataTmpt);
          },
        },
      });
    }
  };
  useEffect(() => {
    console.log(props.user);
    if (props.user.currrentuser.length != 0) {
      console.log(JSON.parse(props.user.currrentuser));
      getAllList();
    }
  }, [props]);
  const config = {
    data,
    xField: 'item',
    yField: 'score',
    seriesField: 'user',
    meta: {
      score: {
        alias: '分数',
        min: 0,
        max: 20,
      },
    },
    radius: 1,
    xAxis: {
      line: null,
      tickLine: null,
      grid: {
        line: {
          style: {
            lineDash: null,
          },
        },
      },
    },
    yAxis: {
      line: null,
      tickLine: null,
      grid: {
        line: {
          type: 'line',
          style: {
            lineDash: null,
          },
        },
      },
    },
    // 开启面积
    area: {},
    // 开启辅助点
    point: {
      size: 2,
    },
  };

  return <Radar {...config} />;
};

export default connect(({ Model_StudentAnalysisStudentModel, user }: any) => ({
  Model_StudentAnalysisStudentModel,
  user,
}))(CompareRadarChart);
